<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue'
import DetailDialog from './ui/DetailDialog.vue'
import { FetchLatestAll } from '@/api/publicApi'

import setUpTime from '@/utils/setUpTime'

// 定义变量
// refs
const detailDialogRef = ref()
// 点击展示的某项
let showItem: any = reactive({})
// 表格
const tableData = ref([])

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 分页
const pageInfo = ref({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 定义函数
onMounted(() => {
  getHistoryList()
})
// 获取历史数据
const getHistoryList = () => {
  let params = {
    bwmcode: localStorage.BarWheelMachineCode
  }
  FetchLatestAll(params).then(res => {
    if (res.success) {
      tableData.value = res.result
      tableData.value.forEach((item:any) => {
        item.lastModificationTime = setUpTime.formatTime(
          item.lastModificationTime
        )
      })
    }
  })
}

// 展示弹框
const showItemInfo = (row: any) => {
  console.log('点击的某项----》')
  showItem = {}
  showItem = { ...row }
  detailDialogRef.value.dialogVisible = true
}
</script>

<template>
  <div class="threeAxis-manage-main-box">
    <div class="table-box">
      <el-table
        :cell-style="cellStyle"
        :header-cell-style="headStyle"
        :data="tableData"
        max-height="600"
        size="small"
      >
        <el-table-column
          prop="date"
          label="传感器测点"
        >
          <template #default="scope">
            <div
              style="cursor: pointer;"
              @click="showItemInfo(scope.row)"
            >
              {{ scope.row.positionDescription }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="值"
        >
          <template #default="scope">
            <div class="data-box">
              <div v-if="scope.row.xCode">
                {{ scope.row.xCode }}：{{ scope.row.xValue }} (m/s²)
              </div>
              <div v-if="scope.row.yCode">
                {{ scope.row.yCode }}：{{ scope.row.yValue }} (m/s²)
              </div>
              <div v-if="scope.row.zCode">
                {{ scope.row.zCode }}：{{ scope.row.zValue }} (m/s²)
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="更新时间"
        />
      </el-table>
    </div>
    <!-- <div class="pagination-box">
      <el-pagination
        v-model:current-page="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handlePlanSizeChange"
        @current-change="handlePlanCurrentChange"
      />
    </div> -->
  </div>
  <DetailDialog
    ref="detailDialogRef"
    :show-item="showItem"
  />
</template>

<style lang="scss" scoped>
.threeAxis-manage-main-box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .table-box {
    padding: 0 15px;
    padding-top: 20px;
  }

  .pagination-box {
    margin-top: 10px;
  }
}
</style>